<template>
    <div>
        <!-- 头部刷新区域 -->
        <div class="setdiv">
            <span>系统信息</span>
            <el-button class="refreshRight" plain icon="el-icon-refresh" @click="fresh">刷新</el-button>
        </div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>系统信息</span>
            </div>
            <!-- 系统信息表格区域 -->
            <div class="systemTable">
                <table class="mailTable" :style="styleObject" v-if="s_showByRow">
                    <tr v-for="index in rowCount" :key="index">
                        <td class="column">{{tableData[index*2-2].key}}</td>
                        <td>{{tableData[index*2-2].value}}</td>
                        <td class="column">{{tableData[index*2-1] !== undefined ? tableData[index*2-1].key : ''}}</td>
                        <td>{{tableData[index*2-1] !== undefined ? tableData[index*2-1].value : ''}}</td>
                    </tr>
                </table>
                <table class="mailTable" :style="styleObject" v-else>
                    <tr v-for="index in rowCount" :key="index">
                        <td class="column">{{tableData[index-1].key}}</td>
                        <td>{{tableData[index-1].value}}</td>
                        <td class="column">{{tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].key : ''}}</td>
                        <td>{{tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].value : ''}}</td>
                    </tr>
                </table>
            </div>
        </el-card>
    </div>
</template> 
 <script>
export default {
    data() {
        return {
            styleObject: {},
            s_showByRow: true,
            tableData: [
                { key: "服务器操作系统:", value: "Linux (114.55.34.251)" },
                { key: "PHP 版本:", value: "5.6.30" },
                { key: "安全模式:", value: "否" },
                { key: "Socket 支持:", value: "是" },
                { key: "GD 版本:", value: "GD2 ( JPEG GIF PNG)" },
                { key: "IP 库版本:", value: "20071024" },
                { key: "安装日期::", value: "2018-05-02" },
                { key: "Web 服务器:", value: "nginx/1.10.2" },
                { key: "MySQL 版本:", value: "5.5.56" },
                { key: "安全模式GID:", value: "否" },
                { key: "时区设置:", value: "Asia/Beijing" },
                { key: "Zlib 支持:", value: "是" },
                { key: "程序版本:", value: "v2.2.2 RELEASE 20180629" },
                { key: "编码:", value: "UTF-8" },
            ],
        };
    },
    computed: {
        rowCount: function () {
            return Math.ceil(this.tableData.length / 2);
        },
    },
    created() {
        this.styleObject = this.tableStyle;
        if (this.showByRow !== undefined) {
            this.s_showByRow = this.showByRow;
        }
    },
    methods: {
        fresh() {
            this.$message({
                message: "已刷新",
                type: "success",
            });
        },
    },
};
</script> 
<style lang="less" scoped>
// 头部刷新区域
.setdiv {
    background-color: #f2f2f2;
    padding: 17.5px 0;
    position: relative;
}
.setdiv > span {
    margin-left: 20px;
}
.refreshRight {
    position: absolute;
    right: 20px;
    top: 8px;
}
// 卡片视图区域
.el-card {
    margin-top: 20px;
}
.el-card /deep/ .el-card__header {
    background-color: #f2f2f2;
    // height: 40px;
}
// 系统表格区域
.mailTable {
    font-size: 12px;
    color: #71787e;
    width: 95%;
    margin: auto;
}

.mailTable tr td {
    border: 1px solid #e6eaee;
    width: 150px;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    padding: 0 10px;
}
.mailTable tr td.column {
    background-color: #eff3f6;
    color: #393c3e;
    width: 20%;
}
.systemTable {
    text-align: center;
}
</style> 